<template>
	<view class="search-container">
		<view class="search-virtually-input">
			<view class="search-icon"><u-icon name="search" size="16"></u-icon></view>
			<input class="search-input" type="text" placeholder="搜索" focus="{{true}}" placeholder-style="search-input-placeholder"/>
		</view>
		<view class="search-cancel">取消</view>
	</view>
	<!-- <scroll-view class="station-card-list" type="list" scroll-y> -->
		<view class="station-card" v-for="item in stationList" :key="item.id">
			 <view class="station-card-title-warp">
				 <view class="station-card-name">{{item.address}}</view>
				 <view class="station-card-device">
					 <view class="station-card-device-count fast">
						 <view class="type">快</view>
						 <text class="usable">10</text>
						 <text class="count">/10</text>
					 </view>
					 <view class="station-card-device-count slow">
						 <view class="type">慢</view>
						 <text class="usable">10</text>
						 <text class="count">/10</text>
					 </view>
				 </view>
			 </view>
			 <view class="station-card-info">红红火火恍恍惚惚</view>
			 <view class="station-card-address-warp">
				 <view class="station-card-address-name">红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚</view>
				 <view class="station-card-address-distance">距您1234.5km</view>
			 </view>
		</view>
		<view class="bottom-status-line">
			搜索
		</view>
		<view class="safe-area-bottom"></view>
	<!-- </scroll-view> -->
</template>

<script setup lang="ts">
	import request from '@/utils/request'
	import { CHARGING_STATIONS } from '@/utils/request/api'
	import UIcon from 'uview-ui/components/u-icon/u-icon.vue'
	import { onMounted, ref } from 'vue';
	import { useLocationStore } from '@/store/location'
	
	const locationStore = useLocationStore()
	


	const stationList = ref<any[]>([])
	onMounted(async () => {
		if (!locationStore.hasUserLocation()) {
			await locationStore.refreshUserLocation()
		}
		request
			.get(CHARGING_STATIONS, {
				params: {
					latitude: locationStore.userLocation.latitude,
					longitude: locationStore.userLocation.longitude,
					radius: 5000
				},
			})
			.then((res) => {
				if (Array.isArray(res.data) && res.data.length) {
					stationList.value = res.data
				}
			})
	})
		
	
	defineExpose({})
</script>

<style lang="scss">
page {
	height: 100vh;
	background-color: $u-bg-color;
	// display: flex;
	// flex-direction: column;
}
</style>
<style lang="scss" scoped>
.search-container {
	flex: none;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 7px 10px 7px;
}
.station-card-list {
	overflow: hidden;
	flex: 1;
}
.search-virtually-input {
	flex: 1;
	display: flex;
	align-items: center;
	border-radius: 4px;
	background-color: $u-bg-color;
}
.search-icon {
	margin: 0 6px;
}
.search-input {
	flex: 1;
	font-size: 12px;
	height: 30px;
}
.search-input-placeholder {
	color: $u-tips-color;
}
.search-cancel {
	font-size: 12px;
	margin-left: 10px;
	color: $u-tips-color;
}

.bottom-status-line {
	opacity: 0.4;
	display: flex;
	align-items: center;
	margin: 20px 0;
	font-size: 12px;
	color: $u-tips-color;
}
.bottom-status-line::after, .bottom-status-line::before{
	content: '';
	flex: 1;
	display: block;
	height: 1px;
	background-color: $u-tips-color;
	margin: 0 10px;
	transform: scaleY(0.5);
}

.station-card {
	padding: 10px;
	background-color: #fff;
	border-bottom: $u-border-color 1px solid;
}
.safe-area-bottom {
	height: var(--safe-area-inset-bottom);
}
.station-card-title-warp {
	display: flex;
	font-size: 14px;
	color: $u-main-color;
}
.station-card-device {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.station-card-device-count {
	display: flex;
	align-items: center;
	height: 18px;
	border-style: solid;
	border-width: 1px;
	border-radius: 10px;
	font-size: 12px;
	margin-left: 6px;
}
.station-card-device-count:nth-child(1) {
	
	margin-left: 0;
}
.station-card-device-count .count{
	margin-right: 4px;
}
.station-card-device-count .type {
	line-height: 1;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 16px;
	width: 16px;
	border-radius: 8px;
	margin-left: 1px;
	color: #FFFFFF;
}
.station-card-device-count .count {
	color: $u-main-color;
}
.station-card-device-count.fast {
	border-color: $u-error-dark;
}
.station-card-device-count.fast .type {
	background-color: $u-error-dark;
}
.station-card-device-count.fast .usable {
	color: $u-error-dark;
}
.station-card-device-count.slow {
	border-color: $u-success;
}
.station-card-device-count.slow .type {
	background-color: $u-success;
}
.station-card-device-count.slow .usable {
	color: $u-success;
}
.station-card-info {
	font-size: 12px;
	margin-top: 6px;
	color: $u-tips-color;
}
.station-card-address-warp {
	display: flex;
	font-size: 12px;
	margin-top: 6px;
	color: $u-tips-color;
}
.station-card-address-name {
	margin-right: 16px;
}
.station-card-address-distance {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
}
</style>
